package showcase

import (
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/inputotp"
)

templ InputOTPForm() {
	@form.Item() {
		@form.Label(form.LabelProps{
			For: "otp-form",
		}) {
			Verification Code
		}
		@inputotp.InputOTP(inputotp.Props{
			ID:       "otp-form",
			HasError: true,
		}) {
			@inputotp.Group() {
				@inputotp.Slot(inputotp.SlotProps{
					Index: 0,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 1,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 2,
				})
				@inputotp.Separator()
				@inputotp.Slot(inputotp.SlotProps{
					Index: 3,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 4,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 5,
				})
			}
		}
		@form.Description() {
			Enter the 6-digit code sent to your phone
		}
		@form.Message(form.MessageProps{
			Variant: form.MessageVariantError,
		}) {
			Invalid verification code.
		}
	}
}
